<template>
  <view class="customer-page">
    <view class="tab-header">
      <view
        :style="{ color: currentTab == index ? t('color1') : '' }"
        class="tab-item"
        v-for="(tab, index) in tabs"
        :key="index"
        :class="{ active: currentTab === index }"
        @tap="switchTab(index)"
      >
        {{ tab }}
        <view
          :style="{ backgroundColor: t('color2') }"
          class="active-curve"
        ></view>
      </view>
    </view>

    <view class="search-bar" v-if="currentTab === 1">
      <input
        v-model="searchText"
        class="search-input"
        placeholder="请输入客户名称"
      />
      <button
        class="search-btn"
        @click="onSearch"
        :style="{ backgroundColor: t('color1') }"
      >
        搜索
      </button>
    </view>

    <view class="customer-list" v-if="currentTab === 1">
      <block v-for="(customer, idx) in filteredCustomers" :key="customer.id">
        <view class="customer-item">
          <image
            class="avatar"
            :src="customer.avatar || defaultAvatar"
            mode="aspectFill"
          />
          <view class="info">
            <view class="name">{{ customer.name }}</view>
            <view class="remark">{{ customer.remark }}</view>
          </view>
          <button class="chat-btn" @click="startChat(customer)">
            发起会话
          </button>
        </view>
      </block>
      <nomore text="没有更多内容了" v-if="nomore"></nomore>
    </view>

    <view v-if="currentTab === 0">
      <!-- 会话记录列表 -->
      <view class="message-list">
        <view
          class="message-item"
          @click="toChat(item)"
          v-for="(item, index) in datalist"
          :key="index"
        >
          <image class="avatar" :src="item.headimg" mode="aspectFill"></image>
          <view class="message-content">
            <view class="message-title">
              <text>{{ item.nickname }}</text>
              <!-- <text class="message-title-text">{{ getType(item.type) }}</text> -->
            </view>
            <view class="message-subtitle">{{
              item.new_message_log && item.new_message_log.content
            }}</view>
            <view class="message-time">{{
              item.new_message_log && item.new_message_log.date
            }}</view>
          </view>
          <view class="message-badge" v-if="item.no_read_count">{{
            item.no_read_count
          }}</view>
        </view>
        <nomore text="没有更多内容了" v-if="nomore2"></nomore>
      </view>
    </view>
  </view>
</template>

<script>
var app = getApp();
export default {
  data() {
    return {
      searchText: "",
      customers: [
        {
          id: 1,
          name: "张三",
          remark: "VIP客户",
          avatar: "/static/img/face-icon.png",
        },
        {
          id: 2,
          name: "李四",
          remark: "普通客户",
          avatar: "/static/img/face-icon.png",
        },
        {
          id: 3,
          name: "王五",
          remark: "",
          avatar: "/static/img/face-icon.png",
        },
      ],
      datalist: [],
      scustomers: [],
      defaultAvatar: "/static/img/face-icon.png",
      page: 1,
      limit: 10,
      page2: 1,
      limit2: 10,
      nomore: false,
      canload: true,
      nomore2: false,
      canload2: true,
      currentTab: 0,
      //   tabs: ["客户列表", "会话记录"],
      tabs: ["会话记录"],
      isFirstShow: true,
    };
  },
  computed: {
    filteredCustomers() {
      if (!this.searchText) {
        this.scustomers = [];
        return this.customers;
      }

      return this.scustomers;
      //   return this.customers.filter(
      //     (c) =>
      //       c.name.includes(this.searchText) ||
      //       (c.remark && c.remark.includes(this.searchText))
      //   );
    },
  },

  onShow() {
    // 避免首次进入页面触发 onShow 事件
    if (this.isFirstShow) {
      this.isFirstShow = false;
      return;
    }
    this.datalist = [];
    this.page2 = 1;
    this.nomore2 = false;
    this.canload2 = true;
    this.gethistory();
  },

  onReachBottom: function () {
    if (this.currentTab == 1) {
      if (this.canload) {
        this.page++;
        this.getlist();
      }
    }

    if (this.currentTab == 0) {
      if (this.canload2) {
        this.page2++;
        this.gethistory();
      }
    }
  },
  onLoad() {
    this.getAuth();
    this.getlist();
    uni.$on("socketMessage-api", this.handleSocketMessage);
  },

  beforeDestroy() {
    app.globalData.kefuInfo = {};
    uni.$off("socketMessage-api", this.handleSocketMessage);
  },

  onPullDownRefresh: function () {
    if (this.currentTab == 1) {
      this.page = 1;
      this.customers = [];
      this.nomore = false;
      this.canload = true;
      this.getlist();
    }

    if (this.currentTab == 0) {
      this.page2 = 1;
      this.datalist = [];
      this.nomore2 = false;
      this.canload2 = true;
      this.gethistory();
    }
  },

  methods: {
    switchTab(index) {
      this.currentTab = index;
      // this.getdata();
    },

    handleSocketMessage(data) {
      var that = this;
      that.loaded();

      if (data.api_path == "Chat/getchatlist") {
        console.log("getchatlist", data.data);
        if (data.data && data.data.length > 0) {
          this.datalist = this.datalist.concat(data.data);
        } else {
          this.nomore2 = true;
          this.canload2 = false;
        }
      }
    },

    //获取用户关联系统账号信息
    getAuth() {
      let that = this;
      //先接口请求session_id
      app.get("My/getUnionAdminInfo", {}, function (res) {
        if (res.code == 200) {
          app.globalData.kefuInfo = res.data;
          app.sendSocketMessage({
            session_id: res.data.id,
            type: "aadmin_authpi",
          });
          that.gethistory();
        } else {
          app.error(res.msg);
        }
      });
    },

    //获取客户列表
    getlist() {
      let that = this;

      if (that.page > 3) {
        that.nomore = true;
        that.canload = false;
      } else {
        that.customers = that.customers.concat(that.customers);
      }

      return;
      app.showLoading("加载中");
      app.get(
        "MemberNote/noteMessagelist",
        {
          type: 1,
          page: that.page,
          limit: that.limit,
        },
        function (res) {
          app.showLoading(false);
          if (res.status == 200) {
            if (res.data.length == 0) {
              that.nomore = true;
              that.canload = false;
            } else {
              var newData = res.data.map((item) => {
                return {
                  avatarId: item.member.id,
                  avatar: item.member.headimg,
                  username: item.member.nickname,
                  tag: that.checkTag(item.is_friend),
                  action: item.title,
                  time: item.create_time,
                  comment: item.content,
                  pic: item.member_note.pic,
                  detailId: item.data_id,
                };
              });
              that.likeList = that.likeList.concat(newData);
            }
          }
        }
      );
    },

    //获取聊天记录
    gethistory() {
      app.sendSocketMessage({
        session_id: app.globalData.kefuInfo.id,
        type: "api",
        api_path: "Chat/getchatlist",
        random_str: app.globalData.kefuInfo.random_str,
        page: this.page2,
        limit: this.limit2,
      });
    },

    toChat(item) {
      app.goto(
        "/pagesChat/chat/index?id=" +
          item.mid +
          "&type=4&name=" +
          item.nickname +
          "&headimg=" +
          item.headimg
      );
    },

    //联系人类型 1官方 2好友 3陌生人
    getType(type) {
      switch (type) {
        case 1:
          return "官方";
        case 2:
          return "好友";
        case 3:
          return "陌生人";
      }
    },

    onSearch() {
      let that = this;
      that.scustomers = [
        {
          id: 1,
          name: "张三",
          remark: "VIP客户",
          avatar: "/static/img/face-icon.png",
        },
      ];
    },

    startChat(customer) {
      uni.navigateTo({ url: `/pagesChat/chat/chat?customerId=${customer.id}` });
    },
  },
};
</script>

<style lang="scss" scoped>
.tab-header {
  //   display: flex;
  //   background: #fff;
  //   padding: 20rpx 40rpx;
  //   margin-bottom: 20rpx;
  //   position: sticky;
  //   top: 0;
  //   z-index: 9;
  position: sticky;
  top: 0;
  z-index: 10;
  background: #fff;
  display: flex;
  align-items: center;
  padding: 16rpx 24rpx;
  border-bottom: 1px solid #eee;

  .tab-item {
    position: relative;
    padding: 20rpx 40rpx;
    font-size: 32rpx;
    color: #666;
    margin-right: 60rpx;

    &.active {
      color: #333;
      font-weight: bold;

      .active-curve {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 40rpx;
        height: 4rpx;
        background: #ba1f25;
        border-radius: 2rpx;
      }

      &::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 40rpx;
        height: 4rpx;
        // background: #BA1F25;
        border-radius: 2rpx;
      }
    }
  }
}
.customer-page {
  background: #f7f7f7;
  min-height: 100vh;
}
.search-bar {
  //   position: sticky;
  //   top: 0;
  //   z-index: 10;
  background: #fff;
  display: flex;
  align-items: center;
  padding: 16rpx 24rpx;
  border-bottom: 1px solid #eee;
}
.search-input {
  flex: 1;
  height: 64rpx;
  border: 1px solid #ddd;
  border-radius: 32rpx;
  padding: 0 24rpx;
  font-size: 28rpx;
  background: #f5f5f5;
}
.search-btn {
  margin-left: 16rpx;
  height: 64rpx;
  padding: 0 32rpx;
  background: #ba1f25;
  color: #fff;
  border: none;
  border-radius: 32rpx;
  font-size: 28rpx;
  display: flex;
  align-items: center;
}
.customer-list {
  padding: 0 0 32rpx 0;
}
.customer-item {
  display: flex;
  align-items: center;
  background: #fff;
  margin: 16rpx 24rpx 0 24rpx;
  border-radius: 16rpx;
  padding: 24rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
}
.avatar {
  width: 88rpx;
  height: 88rpx;
  border-radius: 50%;
  margin-right: 24rpx;
  background: #eee;
}
.info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.name {
  font-size: 32rpx;
  font-weight: 500;
  color: #222;
}
.remark {
  font-size: 26rpx;
  color: #888;
  margin-top: 8rpx;
}
.chat-btn {
  background: #00c777;
  color: #fff;
  border: none;
  border-radius: 32rpx;
  padding: 0 32rpx;
  height: 64rpx;
  font-size: 28rpx;
}
.no-data {
  text-align: center;
  color: #bbb;
  margin: 48rpx 0;
  font-size: 28rpx;
}

.message-list {
  background-color: #ffffff;
  border-radius: 12rpx;
}

.message-item {
  display: flex;
  align-items: center;
  padding: 30rpx 20rpx;
  border-bottom: 1rpx solid #eee;
  position: relative;

  .message-icon,
  .avatar {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    margin-right: 20rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .avatar-icon {
    width: 40rpx;
    height: 40rpx;
    border-radius: 50%;
  }
  .message-content {
    flex: 1;

    .message-title {
      font-size: 28rpx;
      color: #333;
      margin-bottom: 6rpx;
      .message-title-text {
        border: 1px solid #ff0000;
        border-radius: 10rpx;
        padding: 4rpx 6rpx;
        font-size: 24rpx;
        margin-left: 10rpx;
      }
    }

    .message-subtitle {
      font-size: 24rpx;
      color: #999;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 70vw;
    }

    .message-time {
      font-size: 24rpx;
      color: #999;
      position: absolute;
      right: 20rpx;
      top: 10rpx;
    }
  }

  .message-badge {
    background-color: #ff0000;
    color: #ffffff;
    font-size: 24rpx;
    padding: 2rpx 12rpx;
    border-radius: 20rpx;
    position: absolute;
    right: 20rpx;
    top: 70rpx;
  }
}
</style>
